<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智慧商城</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./fonts/icon-font.css" />
  <link rel="stylesheet" href="./swiper@8.4.7/swiper-bundle.min.css">
  <script src="./swiper@8.4.7/swiper-bundle.min.js"> </script>
  <script src="./js/flexable.js"></script>
  <style>
    body {
      background-color: #fafafa;
    }

    .index-page-hd {
      position: fixed;
      top: 0;
      left: 0;
      height: .44rem;
      width: 100%;
      background-color: rgb(194, 20, 1);
      z-index: 1000;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: .16rem;
      font-weight: 700;
      color: #fff;
    }

    .hidden-height-box {
      height: .44rem;
    }

    .swiper {
      width: 100%;
      height: 2rem;
    }

    .swiper .swiper-slide {
      width: 100%;
      height: 2rem;
    }

    .swiper .swiper-slide a {
      display: block;
    }

    .swiper .swiper-slide a img {
      width: 100%;
    }

    .search-bar {
      background: #f1f1f2;
      padding: .11rem;
      font-size: .14rem;
    }

    .search-bar a {
      display: flex;
      justify-content: center;
      align-items: center;
      height: .33rem;
      background: #fff;
      overflow: hidden;
      border-radius: .05rem;
      color: #999;
    }

    .search-bar a span {
      margin-left: .05rem;
    }

    .ad {
      height: .31rem;
      background: rgb(242, 219, 219);
      padding: .05rem .13rem;
      overflow: hidden;
    }

    .ad>div {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }

    .ad>div .ad-icon {
      display: flex;
      align-items: center;
    }

    .ad>div .ad-icon i {
      font-size: .15rem;
      color: red;
    }

    .ad>div .ad-cont {
      flex: 1;
      display: flex;
      flex-direction: row;
      margin-left: 6px;
      font-size: .15rem;
      color: red;
      overflow: hidden;
      word-break: keep-all;
      white-space: nowrap;
      position: relative;
    }

    .cate {
      background-color: #fff;
      color: #000;
    }

    .cate .cate-list {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
    }

    .cate .cate-list .cate-list-item {
      display: flex;
      flex-direction: column;
      width: 20%;
      margin: .1rem 0;
      text-align: center;
    }

    .cate .cate-list .cate-list-item div {
      text-align: center;
      margin: 0 auto;
      width: .48rem;
      height: .48rem;
      font-size: 0;
      margin-bottom: .06rem;
    }

    .cate .cate-list .cate-list-item div img {
      width: 100%;
    }

    .cate .cate-list .cate-list-item span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #999;
      font-size: .14rem;
    }

    .sub-banner {
      margin-bottom: .07rem;
      padding-top: .07rem;
    }

    .sub-banner a {
      display: block;
      height: 1.3rem;
      width: 100%;
    }

    .sub-banner a img {
      width: 100%;
    }

    .like {
      background-color: #fff;
      font-size: .15rem;
      height: .33rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .like-list {
      display: flex;
      flex-direction: column;
      padding-bottom: .6rem;
    }

    .like-list .like-list-item {
      width: 100%;
      height: 1.54rem;
      margin-bottom: .06rem;
      padding: .11rem;
      box-sizing: border-box;
      background: #fff;
      line-height: 1.6;
      display: flex;
    }

    .like-list .like-list-item .goods-img {
      display: flex;
      margin-right: .25rem;
      width: 1.3rem;
      height: 1.3rem;
      background: #fff;
      align-items: center;
    }

    .like-list .like-list-item .goods-img img {
      width: 1.3rem;
      height: 1.3rem;
    }

    .like-list .like-list-item .goods-info {
      font-size: .14rem;
      color: #999;
    }

    .like-list .like-list-item .goods-info .goods-name {
      margin-top: .11rem;
      min-height: .37rem;
      line-height: 1.3;
      white-space: normal;
      color: #484848;
      font-size: .14rem;
    }

    .like-list .like-list-item .goods-info .goods-name span {
      display: -webkit-box;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .like-list .like-list-item .goods-info .sell-num {
      margin-top: .04rem;
      color: #999;
      font-size: .13rem;
    }

    .like-list .like-list-item .goods-info .goods-price {
      font-size: .13rem;
    }

    .like-list .like-list-item .goods-info .goods-price .sell-price {
      margin-right: .08rem;
      color: #f03c3c;
      font-size: .16rem;
    }

    .like-list .like-list-item .goods-info .goods-price .del-price {
      text-decoration: line-through;
    }
  </style>
</head>

<body>
  <div class="index-page-hd">
    <div class="index-page-hd_title">智慧商城</div>
  </div>
  <div class="hidden-height-box"></div>
  <div class="search-bar">
    <a href="./search.html">
      <i class="iconfont icon-sousuo"></i>
      <span>搜索你要找的商品</span>
    </a>
  </div>
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <a href="">
          <img src="./images/1.png" alt="">
        </a>
      </div>
      <div class="swiper-slide">
        <a href="">
          <img src="./images/2.png" alt="">
        </a>
      </div>
      <div class="swiper-slide">
        <a href="">
          <img src="./images/3.png" alt="">
        </a>
      </div>
      <div class="swiper-slide">
        <a href="">
          <img src="./images/4.png" alt="">
        </a>
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <!-- <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div> -->

    <!-- 如果需要滚动条 -->
    <!-- <div class="swiper-scrollbar"></div> -->
  </div>
  <div class="gb ad">
    <div>
      <div class="ad-icon">
        <i class="iconfont icon-shengyin_shiti"></i>
      </div>
      <div class="ad-cont">
        <span>智慧商城2.0全新上线，更多新品等你来选~</span>
      </div>
    </div>
  </div>
  <div class="cate">
    <div class="cate-list">
      <div class="cate-list-item">
        <div>
          <img src="./images/58a7c1f62df4cb1eb47fe83ff0e566e6.png" alt="">
        </div>
        <span>新品首发</span>
      </div>
      <div class="cate-list-item">
        <div>
          <img src="./images/58a7c1f62df4cb1eb47fe83ff0e566e6.png" alt="">
        </div>
        <span>新品首发</span>
      </div>
      <div class="cate-list-item">
        <div>
          <img src="./images/58a7c1f62df4cb1eb47fe83ff0e566e6.png" alt="">
        </div>
        <span>新品首发</span>
      </div>
      <div class="cate-list-item">
        <div>
          <img src="./images/58a7c1f62df4cb1eb47fe83ff0e566e6.png" alt="">
        </div>
        <span>新品首发</span>
      </div>
      <div class="cate-list-item">
        <div>
          <img src="./images/58a7c1f62df4cb1eb47fe83ff0e566e6.png" alt="">
        </div>
        <span>新品首发</span>
      </div>
      <div class="cate-list-item">
        <div>
          <img src="./images/58a7c1f62df4cb1eb47fe83ff0e566e6.png" alt="">
        </div>
        <span>新品首发</span>
      </div>
      <div class="cate-list-item">
        <div>
          <img src="./images/58a7c1f62df4cb1eb47fe83ff0e566e6.png" alt="">
        </div>
        <span>新品首发</span>
      </div>
      <div class="cate-list-item">
        <div>
          <img src="./images/58a7c1f62df4cb1eb47fe83ff0e566e6.png" alt="">
        </div>
        <span>新品首发</span>
      </div>
      <div class="cate-list-item">
        <div>
          <img src="./images/58a7c1f62df4cb1eb47fe83ff0e566e6.png" alt="">
        </div>
        <span>新品首发</span>
      </div>
      <div class="cate-list-item">
        <div>
          <img src="./images/58a7c1f62df4cb1eb47fe83ff0e566e6.png" alt="">
        </div>
        <span>新品首发</span>
      </div>
    </div>
  </div>
  <div class="sub-banner">
    <a href="">
      <img src="./images/647c6bde4b1f1a3e88955e5f596344f9.png" alt="">
    </a>
  </div>
  <div class="like">
    <p>—— 猜你喜欢 ——</p>
  </div>
  <div class="like-list">
    <div class="like-list-item">
      <div class="goods-img">
        <img src="./images/8f505c6c437fc3d4b4310b57b1567544.jpg" alt="">
      </div>
      <div class="goods-info">
        <div class="goods-name"><span>
            三星手机 SAMSUNG Galaxy S23 8GB+256GB 超视觉夜拍系统 超清夜景 悠雾紫 5G手机 游戏拍照旗舰机s23
          </span></div>
        <div class="sell-num">已售111件</div>
        <div class="goods-price">
          <span class="sell-price">¥0.091</span>
          <span class="del-price">¥6699.00</span>
        </div>
      </div>
    </div>
    <div class="like-list-item">
      <div class="goods-img">
        <img src="./images/8f505c6c437fc3d4b4310b57b1567544.jpg" alt="">
      </div>
      <div class="goods-info">
        <div class="goods-name">
          <span>
            三星手机 SAMSUNG Galaxy S23 8GB+256GB 超视觉夜拍系统 超清夜景 悠雾紫 5G手机 游戏拍照旗舰机s23
          </span>
        </div>
        <div class="sell-num">已售111件</div>
        <div class="goods-price">
          <span class="sell-price">¥0.091</span>
          <span class="del-price">¥6699.00</span>
        </div>
      </div>
    </div>
    <div class="like-list-item">
      <div class="goods-img">
        <img src="./images/8f505c6c437fc3d4b4310b57b1567544.jpg" alt="">
      </div>
      <div class="goods-info">
        <div class="goods-name"><span>
            三星手机 SAMSUNG Galaxy S23 8GB+256GB 超视觉夜拍系统 超清夜景 悠雾紫 5G手机 游戏拍照旗舰机s23
          </span></div>
        <div class="sell-num">已售111件</div>
        <div class="goods-price">
          <span class="sell-price">¥0.091</span>
          <span class="del-price">¥6699.00</span>
        </div>
      </div>
    </div>
    <div class="like-list-item">
      <div class="goods-img">
        <img src="./images/8f505c6c437fc3d4b4310b57b1567544.jpg" alt="">
      </div>
      <div class="goods-info">
        <div class="goods-name"><span>
            三星手机 SAMSUNG Galaxy S23 8GB+256GB 超视觉夜拍系统 超清夜景 悠雾紫 5G手机 游戏拍照旗舰机s23
          </span></div>
        <div class="sell-num">已售111件</div>
        <div class="goods-price">
          <span class="sell-price">¥0.091</span>
          <span class="del-price">¥6699.00</span>
        </div>
      </div>
    </div>
    <div class="like-list-item">
      <div class="goods-img">
        <img src="./images/8f505c6c437fc3d4b4310b57b1567544.jpg" alt="">
      </div>
      <div class="goods-info">
        <div class="goods-name"><span>
            三星手机 SAMSUNG Galaxy S23 8GB+256GB 超视觉夜拍系统 超清夜景 悠雾紫 5G手机 游戏拍照旗舰机s23
          </span></div>
        <div class="sell-num">已售111件</div>
        <div class="goods-price">
          <span class="sell-price">¥0.091</span>
          <span class="del-price">¥6699.00</span>
        </div>
      </div>
    </div>
    <div class="like-list-item">
      <div class="goods-img">
        <img src="./images/8f505c6c437fc3d4b4310b57b1567544.jpg" alt="">
      </div>
      <div class="goods-info">
        <div class="goods-name"><span>
            三星手机 SAMSUNG Galaxy S23 8GB+256GB 超视觉夜拍系统 超清夜景 悠雾紫 5G手机 游戏拍照旗舰机s23
          </span></div>
        <div class="sell-num">已售111件</div>
        <div class="goods-price">
          <span class="sell-price">¥0.091</span>
          <span class="del-price">¥6699.00</span>
        </div>
      </div>
    </div>
  </div>
  <div class="tabbar-nav">
    <a href="" class="active">
      <i class="iconfont icon-shouye"></i>
      <p>首页</p>
    </a>
    <a href="./cate.html">
      <i class="iconfont icon-fenlei"></i>
      <p>分类</p>
    </a>
    <a href="./car.html">
      <i class="iconfont icon-gouwuche"></i>
      <p>购物车</p>
    </a>
    <a href="./my.html">
      <i class="iconfont icon-wode"></i>
      <p>我的</p>
    </a>
  </div>
</body>

</html>